<!-- 视频背景 -->
<div class="video-container">
  <video id="bg-video" autoplay muted loop playsinline>
    <source type="video/mp4" />
  </video>
</div>
<!-- SVG -->
<svg style="display:none">
  <filter id="liquid-glass-filter" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox">
    <feTurbulence type="fractalNoise" baseFrequency="0.01 0.01" numOctaves="1" seed="5" result="turbulence">
    </feTurbulence>
    <feComponentTransfer in="turbulence" result="mapped">
      <feFuncR type="gamma" amplitude="1" exponent="10" offset="0.5"></feFuncR>
      <feFuncG type="gamma" amplitude="0" exponent="1" offset="0"></feFuncG>
      <feFuncB type="gamma" amplitude="0" exponent="1" offset="0.5"></feFuncB>
    </feComponentTransfer>
    <feGaussianBlur in="turbulence" stdDeviation="3" result="softMap"></feGaussianBlur>
    <feSpecularLighting in="softMap" surfaceScale="5" specularConstant="1" specularExponent="100" lighting-color="white"
      result="specLight">
      <fePointLight x="-200" y="-200" z="300"></fePointLight>
    </feSpecularLighting>
    <feComposite in="specLight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage"></feComposite>
    <feDisplacementMap in="SourceGraphic" in2="softMap" scale="150" xChannelSelector="R" yChannelSelector="G">
    </feDisplacementMap>
  </filter>
</svg>
<!-- JS -->
<script type="text/javascript">
  // 配置项
  const config = Object.freeze({
    video: Object.freeze({
      mobileSource: 'https://pan.wiiuii.cn/d/DATA/BLOG/video/small.mp4', // 手机视频配置
      desktopSource: 'https://pan.wiiuii.cn/d/DATA/BLOG/video/large.mp4', // PC视频配置
      elementId: 'bg-video', // 提取视频元素ID
      breakpoint: 768 // 添加断点配置
    }),
    footer: Object.freeze({
      selector: '.footer',
      maxAttempts: 10,
      retryInterval: 300,
      blog: 'https://www.biiibii.cn/', // 博客地址
      loginUrl: '/@login', // 登录地址
      manageUrl: '/@manage'  // 管理地址
    })
  });

  // 设备类型枚举
  const DeviceType = Object.freeze({
    MOBILE: 'mobile',
    DESKTOP: 'desktop'
  });

  // 文件扩展名正则，主要用来停止视频播放
  const FILE_EXTENSION_REGEX = /\/[^/]+\.[a-zA-Z0-9]{1,10}(?:$|\/)/;

  // 检测URL路径中是否包含有效后缀名
  function hasFileExtension(url) {
    try {
      return FILE_EXTENSION_REGEX.test(new URL(url).pathname);
    } catch (error) {
      console.error('URL解析错误:', error);
      return false;
    }
  }

  // 防抖函数优化
  const debounce = (func, wait = 250) => {
    let timeout;
    return (...args) => {
      clearTimeout(timeout);
      timeout = setTimeout(() => func.apply(this, args), wait);
    };
  };

  // 视频管理类
  class BackgroundVideoManager {
    constructor() {
      this.videoElement = document.getElementById(config.video.elementId);
      this.sourceElement = this.videoElement?.querySelector('source');
      this.lastSource = '';
      this.lastDeviceType = null;

      // 确保视频元素存在
      if (!this.videoElement || !this.sourceElement) {
        console.warn('视频元素未找到，视频功能将禁用');
        return;
      }

      // 预加载事件监听
      this.videoElement.addEventListener('loadeddata', this.handleVideoLoad.bind(this));
    }

    init() {
      if (!this.videoElement) return;

      this.switchVideoSource();

      // 优化的事件监听
      const resizeHandler = debounce(() => this.switchVideoSource());
      window.addEventListener('resize', resizeHandler);
      document.addEventListener('visibilitychange', this.handleVisibilityChange.bind(this));
    }

    handleVideoLoad() {
      // 仅在无文件后缀时尝试播放
      if (!hasFileExtension(window.location.href)) {
        this.playVideo().catch(e => console.debug('视频自动播放失败:', e));
      }
    }

    handleVisibilityChange() {
      if (document.visibilityState === 'visible' &&
        !hasFileExtension(window.location.href)) {
        this.playVideo().catch(e => console.debug('可见性恢复播放失败:', e));
      }
    }

    getDeviceType() {
      return window.innerWidth < config.video.breakpoint ||
        window.matchMedia('(pointer: coarse)').matches
        ? DeviceType.MOBILE
        : DeviceType.DESKTOP;
    }

    switchVideoSource() {
      const deviceType = this.getDeviceType();
      if (deviceType === this.lastDeviceType) return;

      this.lastDeviceType = deviceType;
      const newSource = deviceType === DeviceType.MOBILE
        ? config.video.mobileSource
        : config.video.desktopSource;

      if (newSource !== this.lastSource) {
        this.sourceElement.src = newSource;
        this.lastSource = newSource;
        this.videoElement.load(); // 触发重新加载
      }
    }

    playVideo() {
      return this.videoElement.play().catch(e => {
        console.warn('视频播放被阻止:', e);
      });
    }

    pauseVideo() {
      this.videoElement.pause();
    }
  }

  // 页脚管理类
  class FooterManager {
    constructor() {
      this.currentYear = new Date().getFullYear();
      this.attemptCount = 0;
      this.intervalId = null;
    }

    init() {
      if (this.tryRenderFooter()) return;

      this.intervalId = setInterval(() => {
        if (this.attemptCount++ >= config.footer.maxAttempts) {
          this.cleanup();
          console.warn("页脚元素未找到，停止尝试");
          return;
        }
        if (this.tryRenderFooter()) this.cleanup();
      }, config.footer.retryInterval);
    }

    tryRenderFooter() {
      const footerElement = document.querySelector(config.footer.selector);
      if (!footerElement) return false;

      footerElement.innerHTML = this.getFooterHtml();
      footerElement.style.opacity = "1";
      return true;
    }

    cleanup() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
        this.intervalId = null;
      }
    }

    getFooterHtml() {
      return `
        <div class="copyright">
          <div class="copyright-links">
            <a href="${config.footer.blog}" target="_blank">博客</a> | 
            <a href="${config.footer.loginUrl}">登录</a> | 
            <a href="${config.footer.manageUrl}">管理</a>
          </div>
          <div class="copyright-desc">
            <p>免责声明：本站为个人网盘，网盘所发布的一切影视、源代码、注册信息及软件等资源仅限用于学习和研究目的</p>
            <p>Copyright ©2024 - ${this.currentYear} All rights Reserved. | 由OpenList驱动</p>
          </div>
        </div>
      `;
    }
  }

  // URL变化处理器
  function createUrlChangeHandler(videoManager) {
    const handler = () => {
      const hasExtension = hasFileExtension(window.location.href);
      document.body.classList.toggle('has-file-extension', hasExtension);

      if (!videoManager || !videoManager.videoElement) return;

      hasExtension ? videoManager.pauseVideo() : videoManager.playVideo();
    };

    // 防抖处理避免频繁调用
    return debounce(handler, 100);
  }

  // 初始化函数
  const init = () => {
    const videoManager = new BackgroundVideoManager();
    videoManager.init();

    const footerManager = new FooterManager();
    footerManager.init();

    // 创建防抖的URL变化处理器
    const urlChangeHandler = createUrlChangeHandler(videoManager);

    // 初始检查
    urlChangeHandler();

    // 监听URL变化事件
    const urlEvents = ['hashchange', 'popstate', 'pushState', 'replaceState'];
    urlEvents.forEach(event => {
      if (event === 'pushState' || event === 'replaceState') {
        const original = history[event];
        history[event] = function () {
          const result = original.apply(this, arguments);
          urlChangeHandler();
          return result;
        };
      } else {
        window.addEventListener(event, urlChangeHandler);
      }
    });
  };

  // DOM加载完成后初始化
  if (document.readyState !== 'loading') {
    init();
  } else {
    document.addEventListener('DOMContentLoaded', init);
  }
</script>